<template>
  <div>
    <div>
      <!--    搜索框-->
<!--      <el-input v-model="search" class="input-with-select" placeholder="请输入宿舍名进行查找" style="float: left;width: 20%"-->
<!--                @keyup.enter.native="searchClick">-->
        <el-select v-model="search" placeholder="宿舍" @change="searchClick">
          <el-option :label="d.dormitoryName" :value="d.dormitoryId" v-for="d in dors" :key="d.dormitoryId"></el-option>
        </el-select>
<!--        <el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>-->
<!--      </el-input>-->
      <el-button
        :disabled="debuilds.length === 0"
        icon="el-icon-delete"
        style="float:left;"
        type="danger"
        @click="alldeBuild">
        一键删除
      </el-button>
      <!--    数据表格-->
      <el-table
        v-loading="loading"
        :data="cleans.records"
        border
        @selection-change="changeBox"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        element-loading-spinner="el-icon-loading"
        element-loading-text="拼命加载中"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          align="center"
          label="Id"
          type="index">
        </el-table-column>
        <el-table-column
          align="center"
          label="楼栋号"
          prop="buildId">

        </el-table-column>
        <el-table-column
          align="center"
          label="宿舍Id"
          prop="dormitoryId">

        </el-table-column>
        <el-table-column
          align="center"
          label="评分"
          prop="cleanScore">
        </el-table-column>
        <el-table-column
          align="center"
          label="检查时间"
          prop="checkTime">
          <template slot-scope="scope">
            <div slot="reference" >
              <el-tag size="medium" type="success">{{ scope.row.checkTime }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
        :page-size="limit"
        :total="total"
        background
        hide-on-single-page
        layout="prev, pager, next"
        @prev-click="prevClick"
        @next-click="nextClick"
        @current-change="handleCurrentChange">
      </el-pagination>
      <el-button type="primary" @click="addCleandialog">添加记录</el-button>
      <!--      添加页面-->
      <el-dialog
        :visible.sync="addVisible"
        :before-close="closeDig"
        :title="title">
        <el-form :model="clean"
                 label-position="left"
                 label-width="auto">
          <el-form-item label="宿舍号">
            <el-select v-model="clean.dormitoryId" placeholder="宿舍">
              <el-option :label="d.dormitoryName" :value="d.dormitoryId" v-for="d in dors" :key="d.dormitoryId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分数">
            <el-input-number v-model="clean.cleanScore"  :min="1" :max="100" ></el-input-number>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-date-picker
              v-model="timeOne"
              format="yyyy 年 MM 月 dd 日"
              placeholder="选择日期"
              type="date"
              value-format="yyyy-MM-dd">
            </el-date-picker>
            <el-time-picker
              v-model="timeTwo"
              :picker-options="{selectableRange: '08:00:00 - 22:00:00'}"
              value-format="HH:mm:ss">
            </el-time-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="closetwo">取消</el-button>
            <el-button type="primary" @click="addFrom">{{title}}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!--      成功提示-->
      <el-dialog
        :visible.sync="res"
      >
        <el-result icon="success" subTitle="请根据提示进行操作" title="成功提示">
          <template slot="extra">
            <el-button size="medium" type="primary" @click="res = false">返回</el-button>
          </template>
        </el-result>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import clean from '@/utils/clean'
import build from '@/utils/build'
import dormitory from '@/utils/dormitory'

export default {
  name: 'Clean',
  data () {
    return {
      timeTwo: '',
      timeOne: '',
      ids: [],
      dors: [],
      debuilds: [],
      cleans: [],
      addClean: {},
      search: '',
      loading: true,
      addVisible: false,
      limit: 10,
      title: '',
      total: 0,
      clean: {
        cleanScore: '',
        cleanId: '',
        checkTime: '',
        dormitoryId: '',
        buildId: ''
      },
      dialogVisible: false,
      res: false
    }
  },
  methods: {
    alldeBuild () {
      this.ids = []
      this.debuilds.forEach(builde => {
        this.ids.push(builde.cleanId)
      })
      clean.deleteAllClean(this.ids).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getClean(this.cleans.current, this.limit, this.search)
      })
    },
    changeBox (val) {
      this.debuilds = val
    },
    closeDig () {
      this.timeTwo = ''
      this.clean = {}
    },
    closetwo () {
      this.addVisible = false
      this.timeTwo = ''
      this.clean = {}
    },
    addCleandialog () {
      this.clean = {}
      this.timeTwo = ''
      this.timeOne = ''
      this.title = '添加'
      this.addVisible = true
    },
    handleEdit (index, row) {
      Object.assign(this.clean, row)
      var list = this.clean.checkTime.split(' ')
      this.timeTwo = list[1]
      this.timeOne = list[0]
      this.title = '修改'
      this.addVisible = true
    },
    addFrom () {
      this.clean.checkTime = this.timeOne + ' ' + this.timeTwo
      if (this.title === '添加') {
        clean.addClean(this.clean).then(() => {
          this.$message.success('添加成功!')
          this.addVisible = false
          this.res = true
          this.getClean(this.cleans.current, this.limit, this.search)
        })
      } else {
        clean.editClean(this.clean).then(() => {
          this.$message.success('修改成功!')
          this.addVisible = false
          this.res = true
          this.getClean(this.cleans.current, this.limit, this.search)
        })
      }
    },
    searchClick () {
      this.getClean(1, this.limit, this.search)
    },

    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        clean.deleteClean(row.cleanId).then(res => {
          this.getClean(this.cleans.current, this.limit, this.search)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleCurrentChange (page) {
      this.getClean(page, this.limit, this.search)
    },
    prevClick () {
      this.getClean(this.cleans.current - 1, this.limit, this.search)
    },
    nextClick () {
      this.getClean(this.cleans.current + 1, this.limit, this.search)
    },
    getClean (page, limit, search) {
      clean.getClean(page, limit, search).then(res => {
        this.cleans = res.data
        this.total = parseInt(this.cleans.total)
        this.loading = false
      })
    }
  },
  created () {
    this.getClean(0, this.limit, this.search)
    dormitory.getAll().then(res => {
      this.dors = res.data
      console.log(this.dors)
    })
  }
}
</script>

<style scoped>

</style>
